#icon-taskbar {
  list-style: none;
  margin: 0;
  padding: 1px;
  display: flex;
  float: right;
  margin-left: auto;
  height: 20px;

}
#sidebar{
  width : fit-content;
  height : fit-content;
  position: fixed;
  right: -600px;
  left : 50% -200px;
  bottom: 50px;
  transition : right 0.5s ease-in-out;
}
#sidebar.show{
  right: 10px;
}




#emerging-div.show {
  bottom: 50px;
}

#task-bar {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: -2px;
  left: 0;
  background-color: rgba(56, 56, 56, .7);
}



.app-item {
  width: fit-content;
  height: auto;
  padding: 5px;
  margin : 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

  cursor: pointer;
  border-radius: 15px;
}
.app-itemm {
  width: fit-content;
  display: flex;
  color: #fff;
  margin-right: 2px;
  cursor: pointer;
  border-radius: 15px;
}
.itemclock{
  display: flex;
  color: #ffffff;
  margin-right: 2px;
  margin-bottom: 1px;
  cursor: pointer;
  border-radius: 15px;
  padding: 10px;
}

.app-item:hover {
  background-color: #777;
}
.smallicon{
  height: auto;
  width : auto;
}
.largeicon{
  height: 35px;
  width : 35px;
}

#search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 35px;
  height: fit-content;
  background-color: #2d2e30;
  /* border below 2pc solid blue */

}
#grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #2d2e30;
}
.row {
padding-left: 10px;
padding-right: 10px;

}
.columnn {

  padding: 0px;
  align-items: center;
  margin: 10px;
}
.imggg {
padding: 4px;
margin: 5px;

}
#below_nav{
background-color: #1d242a;
width: 100%;
height: 60px;
border-radius: 3px;
}
.recommender{
background-color: aliceblue;
height : 30px;

}

#containerrr {
  background-color: #363636;
  width: fit-content;
  border-radius: 20px;

}
#innericon {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: aliceblue;
  padding: 15px;
  margin-bottom: 0px;

}
.innericons{
  border: #1f1f1f 1px solid;

  border-radius: 8px;
  padding: 12px;
}
.innericons:hover{
  border: #1f1f1f 1px solid;
  background-color: #363636;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0px 0px 10px 0px #ffffff;
}
.innericons:hover .whitefontt{
  color: #ffffff;
}

.whitefontt {
  color: aliceblue;
  align-self: center;
  font-size: 12px;

}
.iicones{
  text-align: center;
  margin: 5px;
  padding: 10px 10px 0px 10px;


}
body {
  transition: background-color 0.5s;
}

.imgiconssetting {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.imgiconssettings {
  width: 15px;
  height: 15px;
  margin-left: 10px;
  margin-bottom: 2px;
}
.slidecontainer {
  width: 100%;
}
.slidecontainer {
width: 100%;
}

.slider {
-webkit-appearance: none;
width: 70%;
height: 3px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;

}

.slider:hover {
opacity: 1;
}
.slider:hover::-webkit-slider-thumb{
border: #000000 3px solid;

}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #0030cc;
border-radius: 25px;
cursor: pointer;
padding: 5px;
border: #000000 6px solid;

}

.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #0030cc;
cursor: pointer;

}
.imm{
width: 20px;
height: 20px;
margin-right: 12px;
margin-top: -7px;
margin-left: 40px;
margin-bottom: 12px;
float: left;
}
.immm{
height: 20px;
width: 20px;
}


.slidecontainer {
width: 100%;
padding: 15px 0px 15px 0px;
margin-bottom: 20px;
}
#s1{
  left: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
margin-left : 0px;
padding: 15px;
background-color: #1f1f1f;
}
.wifii{
background-color: #363636;
}
#myRange{
background: linear-gradient(to right, #0030cc 0%, #0030cc 75% , #d3d3d3 75% , #d3d3d3 100%);
}
#search-barr  {
  width: 80%;
  height: 30px;
  border-bottom: 2px solid blue;
  background-color: #1e2327;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVElEQVR4nO2Yv04UURSHr7ZuLG0oWIgRStBYicZnIJogdrwAqIWdjp2v4BPAgq+gWBBbOkTQByCCBWuhiclnTnIwx7t32ZndM8OsmS/ZZLK79/c7Z+b+OWdCaGhoKAxwE3gFbAOfgB/6kev3QAbMhzoBXAIeAPvkRxJalLEXHfwU8JHh2QEmLyr4O8ARo3MM3K86+HvAr0QwP4F1YAmYAa7oZ0a/2zhn3EKV0+ZbIogO0M45fjMx/ijPeI8FG8/538DqEFprOtayM1qEAwAeJu7c6gh6TxN6i8Pq5bn78VbZcdDdijT3fCLuNboVGclinHbQbesitsz5RP2vkZywlnVHbdkALC+9tK2JlAeWJUft5Uj7nZe2NTmITK47ass5Ydn30rYm3cik5ajdirS7XtrW5LTEBK5G2qde2tbkc2Ryw1F7NtI+8NK2JlLPWx45aj+OtLe9tK2JNCOWjRK30Rde2tZkPnGQTTnoTicq1Ns+UfeWEtJJWTYddN9GmruldWraBsasjaD3rLJizjwFaQMtUhI/CcNVonE5LRvF5aJaRY0n+7SSW3mKO53z8bQ5ay0nSg3+DOBuooJEF2NHa5tZPWFber2sv6VaSrRUvxaqAlhwbOpTr2SyKpJoJ9ZEEWTOT8id7/N7VnoSZnfaKxD4ro75u2DP+W9WSRIaxJw0I1LP65nR1VeLh8AHOWHlkErt8wMSzkLdAZ4PSOJ1qDtNEnWBZjrVBJonURPo7QZjVsKYJ/E1jAP0T+IkjAukk3gTxglgBfgCfJfgPV+yNTT8L/wB/zeGyzHMJ78AAAAASUVORK5CYII=") no-repeat scroll;
  background-position: 5px;
  background-size: 25px 25px;
  padding-left: 30px;
  color: #ffffff;
}